<template>
<div>
  <a-carousel autoplay>
    <div  v-for="(item,index) in list" :key="index" class="swiper"><h3 >
      <img :src="item.bannerImgUrl" alt="">
    </h3></div>
<!--    <div><h3>2</h3></div>-->
<!--    <div><h3>3</h3></div>-->
<!--    <div><h3>4</h3></div>-->
  </a-carousel>
</div>
</template>

<script>
import {getSwiper} from "../api/api";

export default {
name: "slideshow",
  data(){
    return {
      list:[]
    }
  },
  created() {
    getSwiper().then(res=>{
      // console.log(res)
      this.list = res.rows
    })
  }
}
</script>

<style scoped >
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
.swiper{
  width: 100%;
  height: 160px;
}
img{
  width: 100%;
  height: 160px;
}
</style>